<template>
	<view class="user">
		<!-- 头部 -->
		<view class="user-wrap">
			<view class="setting iconfont icon31shezhi"></view>
			<view class="info" >
				<image @click="editHeadpic" class="avatar" mode="aspectFill" :src="userInfo.headPicUrl"></image>
				<view @click="editdetails" class="nickname">{{ userInfo.nickName }}</view>
			</view>
		</view>

		<!-- 订单状态 -->
		<view class="order-status">
			<view class="status-wrap">
				<!-- 单元格 -->
				<view class="cell" v-if="TypeID==0" @click="applyNavigate()">
					<view class="cell-left" >
						<image class="cell-icon" src="/static/images/user/icon-order.png" mode="aspectFill"></image>
						<view class="cell-text">我的求职</view>
					</view>
					<view class="iconfont iconmore1" ></view>
				</view>
				<view class="cell" v-if="TypeID==1" @click="EnterpriseApplyNavigate()">
					<view class="cell-left" >
						<image class="cell-icon" src="/static/images/user/icon-order.png" mode="aspectFill"></image>
						<view class="cell-text">资源管理</view>
					</view>
					<view class="iconfont iconmore1" ></view>
				</view>

				<!-- 订单状态 -->
				<view class="status-list">
					<view class="status-item" hover-class="btn-hover" v-for="(item, index) in orderStatusList" :key="index">
						<view class="item-icon" :class="item.icon"></view>
						<view class="item-text">{{ item.name }}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 滑动导航 -->
		<view style="border-radius: 20rpx; overflow: hidden; margin: 0 20rpx;" >
			<com-nav :list="list" :col="4"></com-nav>
		</view>

		<!-- 用户功能 -->
		<view class="com-item">
			<view class="com-wrap">
				<view class="cell" v-for="(item, index) in userList" :key="index" @click="navigate(item.path)">
					<view class="cell-left">
						<image class="cell-icon" :src="item.icon" mode="aspectFill"></image>
						<view class="cell-text">{{ item.title }}</view>
					</view>
					<view class="iconfont iconmore1"></view>
				</view>
			</view>
		</view>

		<!-- 用户服务 -->
		<view class="com-item">
			<view class="com-wrap">
				<view class="cell" v-for="(item, index) in serverList" :key="index" @click="serverListnavigate(item.path)">
					<view class="cell-left">
						<image class="cell-icon" :src="item.icon" mode="aspectFill"></image>
						<view class="cell-text">{{ item.title }}</view>
					</view>
					<view class="iconfont iconmore1"></view>
				</view>
			</view>
		</view>
		
		<u-modal ref="uModal" v-model="show" :show-cancel-button="true"
			:show-title="showTitle" :async-close="asyncClose"
			@confirm="confirm" :content="content"
		>
			<!-- #ifndef MP-WEIXIN || MP-TOUTIAO -->
			<view class="warp" style="margin: 30rpx;" v-if="contentSlot">
				<image class="logo" src="https://uviewui.com/common/logo.png" style="width: 220rpx;" mode="widthFix"></image>
			</view>
			<!-- #endif -->
		</u-modal>
	</view>
</template>

<script>
import comNav from './components/com-nav.vue'
export default {
	components: {
		comNav
	},
	data() {
		return {
			show: false,
			zoom: true,
			content: '是否继续退出账号？',
			contentSlot: false,
			showTitle: false,
			asyncClose: false,
			userInfo: {
				headPicUrl:'./image/2021-09-17/163185048478089600067832.jpeg',
				nickName: '小傻子'
			},
			UserID:'',
			TypeID:'',
			orderStatusList: [
				{ name: '待签约', icon: 'iconfont icon31daifahuo', status: 30 },
				{ name: '待履行', icon: 'iconfont icon31daishouhuo', status: 40 },
				{ name: '待评价', icon: 'iconfont icon31daipingjia', status: 50 },
				{ name: '已完成', icon: 'iconfont icon31yiguanzhudianpu', status: 55 }
			],
			currentIndex: 0,
			list: [
				{
					icon: '/static/images/user/class-01.png',
					text: '我的简历'
				},
				{
					icon: '/static/images/user/class-02.png',
					text: '我的招聘',
					path: '/pages/my/List/recruiter/recruiter'
				},
				{
					icon: '/static/images/user/class-03.png',
					text: '我的积分'
				},
				{
					icon: '/static/images/user/class-04.png',
					text: '成为企业',
					path: '/pages/my/List/becomeTheEnterprise/becomeTheEnterprise'
					
				}
			],
			userList: [
				{
					title: '我的收藏',
					icon: '/static/images/user/icon-collect.png',
					path: '/pages/my/self-collect/self-collect'
				},
				{
					title: '我的足迹',
					icon: '/static/images/user/icon-foot.png',
					path: 'browse-list'
				},
				{
					title: '工作经历',
					icon: '/static/images/user/icon-foot.png',
					path: 'browse-list'
				}
			],
			serverList: [
				{
					title:'退出登录',
					icon:'/static/images/user/icon-kefu.png',
					path:'logout'
				},
				{
					title: '客服中心',
					icon: '/static/images/user/icon-kefu.png',
					path: 'kefu'
				},
				{
					title: '帮助中心',
					icon: '/static/images/user/icon-help.png',
					path: 'help'
				},
				{
					title: '版本',
					icon: '/static/images/user/icon-about.png',
					text: '1.0.0'
				}
			]
		};
	},
	mounted(){
		try {
			const value = uni.getStorageSync('setUserData');
			this.UserID = value.user_id
			this.TypeID = value.type_id
		
		} catch (e) {
			// error
		}
		this.$api.user.getUserLatestInfo(this.UserID).then(res=>{
			console.log(res)
			let state = res.data.code
			let userDate={
				"username":res.data.data.username,
				"user_id":res.data.data.id,
				"type_id":res.data.data.type_id,
				"sex":res.data.data.sex,
				"birthday":res.data.data.birthday,
				"city":res.data.data.city,
				"city_code":res.data.data.city_code,
				
			}
			let userHeadpic={
				"headpic":res.data.data.headpic
			}
			if (state==200){
				try {
				    uni.setStorageSync('setUserData', userDate);//同步存入缓存
					uni.setStorageSync('setUserHeadpic', userHeadpic);//同步存入缓存
					const userHead = uni.getStorageSync('setUserHeadpic');
					this.userInfo.headPicUrl="http://localhost:9090/"+userHead.headpic
					this.userInfo.nickName=userDate.username
				} catch (e) {
				    // error
				}
				
			}
			
		})
	},
	methods:{
		editdetails(){
			uni.navigateTo({
				url: '/pages/my/self-detail?id='+this.UserID,
				animationType: 'fade-in'
			});
		},
		editHeadpic(){
			uni.redirectTo({
				url: '/pages/my/headpic',
				animationType: 'fade-in'
			});
		},
		applyNavigate(){
			uni.navigateTo({
				url:'/pages/my/self-apply/self-apply?id='+this.UserID,
				animationType: 'fade-in'
			})
		},
		EnterpriseApplyNavigate(){
			uni.navigateTo({
				url:'/pages/my/RecruiterApplicationRecord/RecruiterApplicationRecord?id='+this.UserID,
				animationType: 'fade-in'
			})
		},
		navigate(path){
			console.log(path)
			uni.navigateTo({
			    url: path
			});
		},
		touch(index){
		   console.log(index)	
		},
		serverListnavigate(path){
		    if (path=="logout")
				{
					console.log("退出")
					this.show = true;	
				}else{
					
				}
		},
		confirm() {
			setTimeout(() => {
				this.show = false;
				uni.reLaunch({
					url:"/pages/login/login",
					success(res) {
						try {
						    uni.clearStorageSync();
						} catch (e) {
						    // error
						}
					},
					fail(res) {
						
					}
				})
			}, 200)
		}
	},
	
};
</script>

<style lang="scss">
page {
	background: #f2f2f2;
}
.btn-hover {
	background: #f2f2f2 !important;
}
.user {
	.user-wrap {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 50vw;
		padding: 30rpx;
		z-index: 9;
		border-radius: 0 0 20% 20%;
		background: url('https://handsel.oss-cn-shenzhen.aliyuncs.com/1588938371592.jpg') no-repeat;
		background-size: cover;
		.setting {
			color: #fff;
			position: absolute;
			top: 60rpx;
			left: 60rpx;
			font-size: 50rpx;
		}
		.info {
			position: absolute;
			text-align: center;
			.avatar {
				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;
			}
			.nickname {
				color: #fff;
				font-size: 28rpx;
			}
		}
	}
	.order-status {
		padding: 0 20rpx;
		margin-top: -10vw;
		.status-wrap {
			border-radius: 25rpx;
			overflow: hidden;
			.status-list {
				display: flex;
				justify-content: space-evenly;
				align-items: center;
				background: #fff;
				padding-top: 30rpx;
				padding-bottom: 30rpx;
				.status-item {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					.item-icon {
						line-height: 1;
						font-size: 65rpx;
						color: #bbb;
					}
					.item-text {
						font-size: 28rpx;
						color: #666;
						margin-top: 5rpx;
					}
				}
			}
		}
	}
	.com-item {
		padding-left: 20rpx;
		padding-right: 20rpx;
		margin-top: 20rpx;
		.com-wrap {
			border-radius: 25rpx;
			overflow: hidden;
		}
	}
	.cell {
		height: 80rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #fff;
		border-bottom: 1px solid #f8f8f8;
		&:active {
			background: #f2f2f2;
		}
		&:last-child {
			border-bottom: none !important;
		}
		.cell-left {
			display: flex;
			align-items: center;
			.cell-icon {
				width: 50rpx;
				height: 50rpx;
			}
			.cell-text {
				color: #666;
				font-size: 28rpx;
				margin-left: 20rpx;
			}
		}
		.iconfont {
			font-size: 40rpx;
			color: #999;
		}
	}
}
</style>
